<?php 
	echo $this->Html->script('jquery.validate');?>

<script>

	function deleteAccount(id){
		var result = window.confirm('Are you sure you want to de-active this Account?');
		if(result == false) return;
		$.ajax({
			url : "<?php echo $this->Html->url(array('controller'=>'Accounts','action'=>'deActive')); ?>/" + id,
			dataType : "html",
            beforeSend:function() {
                $('#myAjaxOverlay').removeClass('hidden');
            },
            success:function (data) {
                $('#myAjaxOverlay').addClass('hidden');
				$('#button_account_'+id).html(data);
                reloadToolTip();
			},
			error : function(request, error) {
                $('#myAjaxOverlay').addClass('hidden');
				alert('error');
			}
		});
	};
	function activeAccount(id){
		var result = window.confirm('Are you sure you want to active this Account?');
		if(result == false) return;
		$.ajax({
			url : "<?php echo $this->Html->url(array('controller'=>'Accounts','action'=>'active')); ?>/" + id,
			dataType : "html",
            beforeSend:function() {
                $('#myAjaxOverlay').removeClass('hidden');
            },
            success:function (data) {
                $('#myAjaxOverlay').addClass('hidden');
				$('#button_account_'+id).html(data);
                reloadToolTip();
			},
			error : function(request, error) {
                $('#myAjaxOverlay').addClass('hidden');
				alert('error');
			}
		});
	};
	function validateForm(){
		$("#signupForm").validate({
			rules: {
				"data[Account][username]": {
					required: true,
					minlength: 2
				},
				"data[Account][fullname]": "required",
				"data[Account][phone]": {
				    required: true,
				    digits: true,
				    minlength: 10,
				    maxlength: 12
				},
				"data[Account][email]": {
					required: true,
					email: true
				}
			},
			messages: {
				"data[Account][username]": {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				"data[Account][fullname]": "Please enter your Fullname",
				"data[Account][phone]": {
					required: "Please enter your number phone",
					minlength: "Your number phone must be at least 10 digits long",
					maxlength: "Your number phone must be more than 12 digits long"
				},
				"data[Account][email]": "Please enter a valid email address"
			}
		});
	}
	function openAccountDialog(account_id){
		resetDialog();
		$.ajax({
			url:"<?php echo $this->Html->url(array('controller'=>'Accounts','action'=>'addNewAccount'))?>/"+account_id,
            beforeSend:function() {
                $('#myAjaxOverlay').removeClass('hidden');
                if(account_id)
                    $(".modal-header").find('h3').html("Edit Account");
                else
                    $(".modal-header").find('h3').html("Create New Account");
            },
            success:function (data) {
                $('#myAjaxOverlay').addClass('hidden');
				$('#dialog-body').html(data);
                onDocReady();
				validateForm();
                $('#accountModal').modal('show');
			},
			error:function(request, error) {
				alert(error);
			}
		});
	}
	function resetDialog(){
		$('#signupForm').find('label.error').html('');
		$('#AccountId').val('');
		$('#focusedInput').val('');
		$("#AccountGender option:first-child").attr("selected", "selected");
		$('#AccountGender_chzn span:first-child').html($("#AccountGender option:first-child").html());
		
		$('#inputfullname').val('');
		$('#inputphone').val('');
		$('#inputemail').val('');
		$("#AccountTeamId option:first-child").attr("selected", "selected");
		$('#AccountTeamId_chzn span:first-child').html($("#AccountTeamId option:first-child").html());
		$('#preview').attr('src','/img/no-image.png');
        $('#AccountImage').val('');
	}
    function fileSelected() {

        // get selected file element
        var oFile = document.getElementById('AccountImage').files[0];
        var oImage = $('#preview');
        // prepare HTML5 FileReader
        var oReader = new FileReader();
        oReader.onload = function(e) {
            // e.target.result contains the DataURL which we will use as a source of the image
            oImage.attr("src",e.target.result);
        };

        // read selected file as DataURL
        oReader.readAsDataURL(oFile);
    }
</script>

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Manage Account</h3>
    </div><!-- /.box-header -->
    <div class="box-body table-responsive">
        <table id="example1" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Registered</th>
                    <th>Fullname</th>
                    <th>Role</th>
                    <th style="width: 75px">Actions</th>
                </tr>
            </thead>
            <tbody>
            <?php

            foreach ($account as $key => $value) {?>
                <tr>
                    <td class="dynamic_word"><?php echo $value['username']; ?></td>
                    <td class="dynamic_word"><?php echo $this->Time->format($value->created_date, 'MMM-dd-YYYY'); ?></td>
                    <td class="dynamic_word"><?php echo $value['fullname']; ?></td>
                    <td class="dynamic_word"><?php echo $role_list[$value['role_id']]; ?></td>
                    <td class="center">
                        <div id="button_account_<?php echo $value['id']?>" style="float:left; margin-right:3px">
                            <?php if($value['is_delete']){ ?>
                                <a style="float: left" class="btn btn-warning" title="Click here to active this account." data-rel="tooltip"
                                   onclick="activeAccount('<?php echo $value['id'];?>')"> <i class=" icon-ban-circle icon-white"></i></a>
                            <?php }else{?>
                                <a style="float: left" class="btn btn-success <?php echo $value['is_delete'] ? 'disabled' : ''; ?>"
                                   title="Click here to de-active this account." data-rel="tooltip" onclick="deleteAccount('<?php echo $value['Account']['id'];?>')"> <i class="icon-ok-circle icon-white"></i></a>
                            <?php }?>
                        </div>
                        <a class="btn btn-info" onclick="openAccountDialog('<?php echo $value['Account']['id']?>')"> <i class="icon-edit icon-white"></i></a>
                    </td>
                </tr>
            <?php
            } ?>
            </tbody>
        </table>
        <div class="clear"><br/></div>
        <a href="/Accounts/addNewAccount" class="btn btn-primary" onclick="openAccountDialog()">Add New Account</a>
    </div>
</div>